import {
  defineComponent,
  useCssVars,
  ref,
  computed,
  onMounted,
  onUnmounted,
  openBlock,
  createElementBlock,
  Fragment,
  renderList,
  createElementVNode,
  toDisplayString,
  normalizeStyle,
  pushScopeId,
  popScopeId
} from "vue";
import {
  j as useData,
  b as useProp,
  _ as _export_sfc
} from "./index-CEDaTd93.js";
const _withScopeId = n => (
  pushScopeId("data-v-00426ae9"), (n = n()), popScopeId(), n
);
const _hoisted_1 = { class: "ranking-info" };
const _hoisted_2 = { class: "rank" };
const _hoisted_3 = { class: "info-name" };
const _hoisted_4 = { class: "ranking-value" };
const _hoisted_5 = { class: "ranking-column" };
const _hoisted_6 = /* @__PURE__ */ _withScopeId(() =>
  /* @__PURE__ */ createElementVNode("div", { class: "shine" }, null, -1)
);
const _hoisted_7 = [_hoisted_6];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "RankBoard",
  props: {
    component: {}
  },
  setup(__props) {
    useCssVars(_ctx => ({
      e4a193fa: fontSize.value,
      "5ce1bbe4": rankColor.value,
      a594d5bc: labelColor.value,
      ed5cee76: valueColor.value,
      "1b55fae4": lineHeight.value,
      "1813751c": lineColor.value,
      "9b532732": barHeight.value,
      "98559f70": linearGradient.value,
      df1b9f52: borderGap.value,
      "6b08cf71": borderRadius.value,
      "894909fe": color1.value
    }));
    const props = __props;
    const dataSource = ref([]);
    const dataChange = (resp, _) => {
      if (resp.status === "SUCCESS") {
        dataSource.value = resp.afterData;
      }
      updateData(dataSource.value);
    };
    useData(props.component, dataChange);
    const propValueChange = (propKeys, value) => {
      if (propKeys.length !== 2) return;
      const [prop, key] = propKeys;
      if (prop === "bar") {
        switch (key) {
          case "barHeight":
            barHeight.value = `${value}px`;
            break;
          case "borderRadius":
            borderRadius.value = `${value}px`;
            break;
          case "color1":
            color1.value = value;
            break;
          case "color2":
            color2.value = value;
            break;
        }
      } else if (prop === "line") {
        switch (key) {
          case "lineHeight":
            lineHeight.value = `${value}px`;
            break;
          case "borderGap":
            borderGap.value = `${value}px`;
            break;
          case "lineColor":
            lineColor.value = value;
            break;
        }
      } else if (prop === "text") {
        switch (key) {
          case "fontSize":
            fontSize.value = `${value}px`;
            break;
          case "labelColor":
            labelColor.value = value;
            break;
          case "valueColor":
            valueColor.value = value;
            break;
          case "rankColor":
            rankColor.value = value;
            break;
        }
      }
      if (prop === "data" && key === "unit") unit.value = value;
    };
    const { propValue } = useProp(props.component, propValueChange);
    const unit = ref(propValue.data.unit);
    const barHeight = ref(`${propValue.bar.barHeight}px`);
    const fontSize = ref(`${propValue.text.fontSize}px`);
    const labelColor = ref(propValue.text.labelColor || "#fff");
    const valueColor = ref(propValue.text.valueColor || "#fff");
    const rankColor = ref(propValue.text.rankColor || "#fff");
    const color1 = ref(propValue.bar.color1 || "#3DE7C9");
    const color2 = ref(propValue.bar.color2 || "#00BAFF");
    const borderRadius = ref(`${propValue.bar.borderRadius}px`);
    const lineHeight = ref(`${propValue.line.lineHeight}px`);
    const borderGap = ref(`${propValue.line.borderGap}px`);
    const lineColor = ref(propValue.line.lineColor || "#3DE7C9");
    const linearGradient = computed(
      () => `linear-gradient(to right, ${color1.value}, ${color2.value})`
    );
    const maxValue = computed(() => {
      if (propValue.data.maxValue) {
        return propValue.data.maxValue;
      } else {
        return Math.max(...dataSource.value.map(el => el.value));
      }
    });
    const updateData = results => {
      (results || []).sort((a, b) => b.value - a.value);
      dataSource.value = results;
    };
    onMounted(async () => {});
    onUnmounted(() => {});
    return (_ctx, _cache) => {
      return (
        openBlock(),
        createElementBlock(
          "div",
          {
            ref,
            class: "dv-scroll-ranking-board"
          },
          [
            (openBlock(true),
            createElementBlock(
              Fragment,
              null,
              renderList(dataSource.value, (item, index) => {
                return (
                  openBlock(),
                  createElementBlock(
                    "div",
                    {
                      key: item.label,
                      class: "row-item"
                    },
                    [
                      createElementVNode("div", _hoisted_1, [
                        createElementVNode(
                          "div",
                          _hoisted_2,
                          "No." + toDisplayString(index + 1),
                          1
                        ),
                        createElementVNode(
                          "div",
                          _hoisted_3,
                          toDisplayString(item.label),
                          1
                        ),
                        createElementVNode(
                          "div",
                          _hoisted_4,
                          toDisplayString(item.value) +
                            " " +
                            toDisplayString(unit.value),
                          1
                        )
                      ]),
                      createElementVNode("div", _hoisted_5, [
                        createElementVNode(
                          "div",
                          {
                            class: "inside-column",
                            style: normalizeStyle({
                              width: `${
                                maxValue.value
                                  ? (item.value * 100) / maxValue.value
                                  : 100
                              }%`
                            })
                          },
                          _hoisted_7,
                          4
                        )
                      ])
                    ]
                  )
                );
              }),
              128
            ))
          ]
        )
      );
    };
  }
});
const RankBoard = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-00426ae9"]
]);
export { RankBoard as default };
